import { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from './hooks/useStore';

import { fetchRandomWall, fetchUser } from './store/reducer/user/thunk';
import { RouterProvider } from 'react-router-dom';
import router from './router';
import Error from './pages/Error';
import { LoadingOutlined } from '@ant-design/icons';
function App() {
  const dispatch = useAppDispatch();
  const { loading, error, status, data } = useAppSelector(state => state.user);

  useEffect(() => {
    if (!data.IP) {
      dispatch(fetchUser()); // 触发异步操作
      dispatch(fetchRandomWall()); // 触发异步操作
    }
  }, [dispatch, data]);
  if (error) {
    return <Error error={error}></Error>;
  }
  if (status === 'idle' || loading) {
    return (
      <div>
        Loading... <LoadingOutlined />
      </div>
    );
  }

  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default App;
